const path = require('path');
let webpack = require('webpack');
//引入HTML打包插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
//引入CSS打包插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//产生页面对应的HtmlWebpackPlugin对象
let pageArray = ['index', 'login'];//所有页面添加到这个数组中
let HTMLPluginObj = pageArray.map(p => {
    return HTMLPlugin(p);
});
function HTMLPlugin(fileName) {
    return new HtmlWebpackPlugin({
        template: `./src/html/${fileName}.html`,//指明打包的HTML文件路径，参照根目录查找打包资源
        filename: `./html/${fileName}.html`,//指定打包后资源的存储路径以及名称，参照dist目录查找
        chunks: [`${fileName}`]//打包后的当前HTML页面引入的主JS文件(output中filename对应上)名
    })
}
//自动根据页面名称生成主JS配置
function entryList() {
    let items = {};
    pageArray.forEach(pageName => {
        items[pageName] = `./src/js/main/${pageName}.js`;
    });
    return items;
}
module.exports = {
    mode: 'development',//打包模式: development:开发模型，production：生成模式
    entry: {//要打包的资源
        ...entryList()
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'//打包后的资源文件名以源文件名为准
    },
    plugins: [
        // HTMLPlugin('index'),
        // HTMLPlugin('login')
        ...HTMLPluginObj,//配置HTML插件
        new MiniCssExtractPlugin({
            filename: './css/[name].css'//指定打包后资源的存储路径以及名称，参照dist目录查找
        }),
        new webpack.ProvidePlugin({ '$': "jquery" })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,//编写正则，确定要打包的资源，以.CSS结尾的资源要被打包
                // exclude:'',//exclude排除不打包的元素
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/i,//编写正则，确定要打包的资源，以.CSS结尾的资源要被打包
                // exclude:'',//exclude排除不打包的元素
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|webp)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 10,
                        outputPath: './image/',//打包后的图片存放的位置，参照dist查找
                        esModule: false//用于解决兼容问题
                    }
                }]//可以有中括号，也可以不要中括号
            },
            {
                test: /\.html$/,
                use: ['html-withimg-loader']
            }
        ]
    },
    devServer: {
        port: 8888,//服务器端口号
        open: true,//启动服务器时自动打开一个页面
        openPage: './html/index.html',//目录以dist为参照目录
        hot: true,//热部署：开启更新代码后自动重新打包
        proxy: {//配置代理服务器
            '/': {
                //指定后端服务器的url
                target: 'http://localhost:1315'
            },
            // 代理多个服务器
            // '/a': {
            //     //指定后端服务器的url
            //     target: 'http://localhost:3096',
            //     pathRewrite: { '^/a': '' }//把路径里的'/a'开头的替换为空字符串''
            // }
        }
    }

}